<template>
    <div>
        <breadcrumb></breadcrumb>

        <div class="main">
            <div class="main_item">
                <titleVue :title="'基本信息'"></titleVue>
                <el-descriptions class="descriptionsInfo" :border="true" size="small" :column="3" :labelStyle="{
                    color: '#262626',
                    fontSize: '12px',
                    fontWeight: 'bold',
                    width: '120px',
                    height: '40px',
                    backgroundColor: '#F0F6FD',
                }" :contentStyle="{
    color: '#262626',
    fontSize: '12px',
}">
                    <el-descriptions-item label="车队编号">{{ data.fleetNumber }}</el-descriptions-item>
                    <el-descriptions-item label="车队名称">{{ data.fleetName }}</el-descriptions-item>
                    <el-descriptions-item label="所在地区">{{ data.region }}</el-descriptions-item>
                    <el-descriptions-item label="详细地址" :span="3">{{ data.address }}</el-descriptions-item>
                    <el-descriptions-item label="车辆数">{{ data.vehicleNum }}</el-descriptions-item>
                    <el-descriptions-item label="司机数">{{ data.driverNum }}</el-descriptions-item>
                    <el-descriptions-item label="负责人">{{ data.dispatcherName }}</el-descriptions-item>
                    <el-descriptions-item label="负责人电话" :span="3">{{ data.dispatcherPhone }}</el-descriptions-item>
                    <el-descriptions-item label="服务范围" :span="3">{{ data.serverRange }}</el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="main_item">
                <titleVue :title="'车辆信息'"></titleVue>
                <div class="list">
                    <!-- :header-cell-class-name="headerStyle" -->
                    <!-- :row-class-name="rowStyle" -->
                    <!-- :row-style="tableRowStyle" -->
                    <el-table :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle" border style="width: 100%"
                        :data="vehicleInfoVos">
                        <el-table-column prop="" label="车辆照片" align="left">
                            <template slot-scope="scope">
                                <el-image style="width: 43px; height: 28px;" :src="scope.row.carFortyFive"
                                    :preview-src-list="srcListVehicle">
                                    <div slot="error" class="image-slot"
                                        style="display: flex;justify-content: center;align-items:center;height:28px;">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="vehicleType" label="车辆类型">
                        </el-table-column>
                        <el-table-column align="left" prop="numberplate" label="车牌号">
                        </el-table-column>
                        <el-table-column align="left" prop="brandModel" label="品牌规格">
                        </el-table-column>
                        <el-table-column align="left" prop="vehicleParams" width="458px" label="参数">
                        </el-table-column>
                        <el-table-column align="left" prop="driverName" label="绑定司机">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 如果是外部车队详情不显示 司机信息 -->
            <div class="main_item" v-if="this.$route.query.type!='external'">
                <titleVue :title="'司机信息'"></titleVue>
                <div class="list">
                    <el-table :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle" border style="width: 100%"
                        :data="driverInfoVOS">
                        <el-table-column prop="" label="司机照片" align="left">
                            <template slot-scope="scope">
                                <el-image style=" width: 20px;height: 28px;" :src="scope.row.driverPhoto"
                                    :preview-src-list="srcList">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="driverName" label="司机姓名">
                        </el-table-column>
                        <el-table-column align="left" prop="region" label="所属地区">
                        </el-table-column>
                        <el-table-column align="left" prop="phoneNumber" label="手机号">
                        </el-table-column>
                        <el-table-column align="left" prop="numberplate" label="绑定车辆">
                        </el-table-column>
                    </el-table>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import titleVue from '@/components/titleVue.vue';
import breadcrumb from '@/components/breadcrumb.vue';
import httpApi from '@/http';
export default {
    data() {

        return {
            data: {},
            driverInfoVOS: [],
            vehicleInfoVos: [],
            srcList: [],
            srcListVehicle: [],
        }
    },
    methods: {
        tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
            return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:48px;paddingTop:8px;paddingBottom:8px;'
        },
        rowStyle({ row, rowIndex }) {
            return 'tableRowStyleName'
        },
        /*   tableRowStyle({ row, rowIndex }) {
              return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F0F6FD;height:40px;paddingTop:8px;paddingBottom:8px;'
          }, */
        /* headerStyle({ row, column, rowIndex, columnIndex }) {
            return 'tableStyle'
        }, */



        getDetails() {
            let params = {
                fleetId: this.$route.query.fleetId
            }
            httpApi.fleetManagementApi.getFleetDetails(params).then(res => {
                ////console.log('车队详情', res);
                this.data = res.data.data
                this.driverInfoVOS = res.data.data.driverInfoVOS
                this.vehicleInfoVos = res.data.data.vehicleInfoVos
                // 预览图片数组 添加url
                this.driverInfoVOS.forEach(item => {
                    this.srcList.push(item.driverPhoto)
                })
                this.vehicleInfoVos.forEach(item => {
                    this.srcListVehicle.push(item.carFortyFive)
                })
                //console.log( this.srcListVehicle);

            })
        }
    },
    mounted() {
        this.getDetails()
    },
    components: {
        titleVue,
        breadcrumb,
    }
}
</script>

<style lang="scss" scoped>
.main {
    padding: 30px;
    background-color: #fff;
    min-height: calc(100vh - 100px);

    .main_item {
        padding-bottom: 33px;


        ::v-deep .el-table__cell {
            padding: 0px;
        }
    }


}
</style>

<style lang = "scss">
.tableRowStyleName {
    height: 40px !important;
    color: #262626 !important;
    font-size: 12px;
    padding: 0px;
}
</style>


